<script setup lang="ts">
import { companyBillPage, updateBillInfo } from "~/api/user";
import { useRouter } from "vue-router";

const router = useRouter();
const emits = defineEmits(["close", "joinCompany"]);

const closeDialog = (params = {}) => {
  emits("close", params);
};

const createCompany = () => {
  router.push("/enterpriseJoin");
};

const joinCompany = () => {
  emits("joinCompany");
};
</script>

<template>
  <div class="dialog-contact" @click="closeDialog">
    <div class="dialog-content" @click.stop>
      <div class="dialog-header">
        <div class="left">
          <img src="../../assets/dialog-icon.png" alt="" />
          <span>还未绑定企业</span>
        </div>
        <img
          class="close"
          src="../../assets/modal-close.png"
          alt=""
          @click="closeDialog"
        />
      </div>
      <div class="dialog-body">
        <div class="add-company" @click="createCompany">
          <img src="~/assets/addqy-1.png" alt="" />
          <div>
            <span>创建新企业</span>
            <span>点击去创建企业</span>
          </div>
        </div>
        <div class="add-company" @click="joinCompany">
          <img src="~/assets/addqy-2.png" alt="" />
          <div>
            <span>加入已有企业</span>
            <span>已有同事正在使用技能猴子</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.dialog-contact {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(25, 30, 40, 0.5);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dialog-content {
  width: 400px;
  background: #fff;
  border-radius: 12px 12px 12px 12px;
  padding: 24px;
  box-sizing: border-box;
}
.dialog-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  .left {
    flex: 1;
    display: flex;
    align-items: center;
    img {
      width: 20px;
      height: 20px;
      margin-right: 4px;
    }
    span {
      font-size: 16px;
      font-weight: bold;
    }
  }
  .close {
    cursor: pointer;
    width: 16px;
    height: 16px;
  }
}
.add-company {
  background: #ffffff;
  border-radius: 8px 8px 8px 8px;
  border: 1px solid rgba(25, 30, 40, 0.08);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  padding: 18px;
  cursor: pointer;
  img {
    width: 36px;
    height: 36px;
    margin-right: 12px;
  }
  a {
    color: #191e28;
    font-style: normal;
    text-decoration: none;
  }
  div {
    font-size: 15px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    span {
      color: #191e28;
      font-style: normal;
      text-decoration: none;
    }
    span:nth-child(2) {
      font-size: 12px;
      color: #999999;
      margin-top: 4px;
    }
  }
}
</style>
